<template>
  <el-dialog ref="dialog" :title="props.title" :close-on-click-modal="false" draggable :center="props.center">
    <!-- 标题的样式，无法穿透修改，需要使用slot插入标题，才能修改 -->
    <!-- <template #header>
      <p class="dialog-title">{{ title }}</p>
    </template>
    <hr class="hrClass" />
    p {
      padding: 0;
      margin: 0;
    }
    .dialog-title {
      text-align: left;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      color: #464c5b;
    }-->
    <slot />
    <template #footer v-if="props.isFooter">
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <slot name="next"></slot>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PropType } from 'vue'
import { ElDialog } from 'element-plus'

const props = defineProps({
  title: {
    type: String,
    default: '我是标题'
  },
  confirm: {
    type: Function as PropType<() => Promise<void>>,
    default: () => Promise.resolve()
  },
  testConnection: {
    type: Function as PropType<() => Promise<void>>,
    default: () => Promise.resolve()
  },
  isFooter: {
    type: Boolean,
    default: true
  },
  center: {
    type: Boolean,
    default: true
  }
})

const dialog = ref<InstanceType<typeof ElDialog> | null>(null)

const handleConfirm = async () => {
  await props.confirm()
}

const handleCancel = () => {
  if (dialog.value) {
    dialog.value.visible = false
  }
}
</script>

<style lang="scss" scoped></style>
